<!-- <template>
  <view> <view class="main_content">2025 Oreo Stay playful 活动开发中.....</view></view>
<template>
  <view>
    <web-view :src="src"></web-view>
  </view>
</template>
<script setup>
import { onShareAppMessage, onLoad } from "@dcloudio/uni-app";
import { reactive, ref } from "vue";
import { ObjectToQueryString } from "@/utils/utils";
import { onMounted } from "vue";
import { config, ShareConfig } from "./config";

const src = ref("");
const sceneObj = reactive({ scene: "", wx_scene: 0 })

<style lang="less" scoped>
@import "@/static/css/theme.less";
.main_content {
  width: 100%;
  height: 100vh;
  display: flex;
  justify-content: center;
  box-sizing: border-box;
  padding-top: 200px;
}
</style> -->
<template>
  <view
    class="main-content"
    :style="{ backgroundImage: `url(${ossImg('others/2025OreoStayPlayful/bg1.png?v=1')})`,}"
  >
    <!--  slogan  -->
  <view class="outer-box center">
    <view class="slogan">
      <image
        class="child_img"
        mode="widthFix"
        :src="ossImg('others/2025OreoStayPlayful/slogan1.png?v=1')"
        
      ></image>
    </view>
    <!--  video  -->
    <!-- <view class="tt-video center">
      <view class="cover-line"></view>
      <view class="cover-line cover-line-right"></view>
      <video
        autoplay
        loop
        muted
        object-fit="cover"
        controls="{{false}}"
        enable-progress-gesture="{{false}}"
        class="child_img"
        :src="ossImg('others/2025OreoStayPlayful/tt.mp4')"
        
      ></video>
    </view> -->
    <view class="tt-ani">
      <image
        class="child_img"
        mode="widthFix"
        :src="ossImg('others/2025OreoStayPlayful/ani.gif?v=2')"
        
      ></image>
      <!-- <image
        class="child_img"
        mode="widthFix"
        :src="currentFrame"
      ></image> -->
      <!-- <image
        v-for="i in 180"
        :key="i"
        :src="ossImg(`others/2025OreoStayPlayful/ani/1_${String(i - 1).padStart(3, '0')}.png`)"
        mode="widthFix"
        class="child_img ani-item" 
      /> -->
    </view>
    <!--  gif  -->
    <view class="bottom-box">
      <view class="tt">
        <image
          class="child_img"
          mode="widthFix"
          :src="ossImg('others/2025OreoStayPlayful/tt.gif?v=2')"
          
        ></image>
      </view>
      <!--  button  -->
      <view class="btn-box">
        <image
          class="btn-item btn-sub"
          mode="widthFix"
          :src="ossImg('others/2025OreoStayPlayful/sub_btn.png?v=1')"
          @click.stop="handleSubscribeMessage"
        ></image>
        <image
          class="btn-item btn-go"
          mode="widthFix"
          :src="ossImg('others/2025OreoStayPlayful/go_btn.png?v=1')"
          @click.stop="goBack"
        ></image>
      </view>
    </view>
  </view>
  </view>
</template>

<script setup>
import { ref, onMounted, reactive, onBeforeMount, onBeforeUnmount } from "vue"
import { generateSign2, ossImg, ObjectToQueryString, message } from "@/utils/utils"
import { onHide, onLoad, onUnload, onShow } from "@dcloudio/uni-app"
import { userLogin, Subscribe } from "@/services/utils"
import { GetSubscribeStatus } from "@/services/activity";
// import { onShareAppMessage } from "@dcloudio/uni-app"
import { onPullDownRefresh } from "@dcloudio/uni-app"
import { QRCODE_BASE_URI, ShareConfig } from "./config"

const emdlz = getApp().emdlz2
const modalType = ref('rule') // privacy

const state = reactive({
  loading: true,
  qrcodeUrl: '',
  needRetry: false,
  isSubscribe: false
})

let enterTime = ""
let outTime = ""
let stayTime = ""

// 帧动画部分
// const frameIndex = ref(0)
// const currentFrame = ref('')
// const totalFrames = 180
// const imagePathPrefix = 'others/2025OreoStayPlayful/ani/1_' // 假设图片命名是 frame_001.png ~ frame_180.png

// const loadFrame = () => {
//   console.log('---loadFrame---', frameIndex.value)
//   const paddedIndex = String(frameIndex.value).padStart(3, '0') // 保证三位数格式
//   currentFrame.value = ossImg(`${imagePathPrefix}${paddedIndex}.png`)
//   frameIndex.value = (frameIndex.value + 1) % totalFrames
// }

// // 预加载所有帧图片
// const preloadFrames = () => {
//   const frames = []
//   for (let i = 0; i < totalFrames; i++) {
//     const paddedIndex = String(i).padStart(3, '0')
//     const url = ossImg(`${imagePathPrefix}${paddedIndex}.png`)
//     // const img = new Image()
//     // img.src = url
//     // frames.push(img)
//     uni.getImageInfo({
//       src: url,
//       success: (res) => {
//         console.log('预加载成功:', url)
//       },
//       fail: (err) => {
//         console.log('预加载失败:', url, err)
//       }
//     })
//   }
//   // return frames
// }

// let animationInterval = null

onLoad((options) => {
  if ((options.banner) && !options.txsrShareInfoSdk) {
    uni.redirectTo({
      url: '/campaign/pages/2025OreoSnacksXEggyParty/loading'
    })
  }
  getApp().accessLogAdd()

  GetSubscribeStatus({
    appId: process.env.WXAPPID,
    scene: 'PLAYFUL25_NOTIFY',
    // thirdPartyId: vid
  }).then(({ data }) => {
    console.log('---subscribeState---', data)
    state.isSubscribe = data
  })
  // if (options.isList) {
  //   setTimeout(() => {
  //     state.storeDialogVisible = true
  //   }, 50)
  // }
  // linkTo('/campaign/pages/2025OreoSnacksXEggyParty/verification')
})

onShow(async () => {
  // 用户进入时间
  enterTime = new Date();

  if (!getApp().globalData.user.phone) return
})

// 订阅活动
const handleSubscribeMessage = () => {
  console.log('---点击订阅---')
  emdlz('track','event','oreo_stay_playful_landing_page_2025','click','sub_msg','');
  if (state.isSubscribe) {
    message('您已经订阅过了')
    return
  }
  // if (state.isSubscribe) return
  // emdlz('track','event','Oreo_24panda_homepage','click','subscrip_campaign','');
  /**
   * 	测试环境模版id：H9gXsw7DzoXX5FW7C3Qgfh25vRYiFMt-FGJb_dxu_O8
   * 	正式环境模版id：nhMrOYgtEMuMjWwrN6WC8_8NXV-amneKNjvAlMFY0ls
   */
  uni.requestSubscribeMessage({
    tmplIds: ['nhMrOYgtEMuMjWwrN6WC8_8NXV-amneKNjvAlMFY0ls'],
    success: async (res) => {
      console.log('---subSuccess---', res)
      await Subscribe({
        appId: process.env.WXAPPID,
        scene: ["PLAYFUL25_NOTIFY"],
        // orderId: state.vid
      })
      state.isSubscribe = true
      message('消息订阅成功')
    },
    fail: function (err) {
      console.log('---subFail---', err)
    }
  })
}

onMounted(async () => {
   // 预加载所有帧
  // const preloadedImages = preloadFrames()
  // state.preloadedImages = preloadedImages // 防止被 GC 回收

  // 开始播放动画
  // loadFrame()
  // animationInterval = setInterval(loadFrame, 1000) // 按照 60fps 播放

  state.loading = false
  // const started = new Date() > new Date('2025/04/08 00:00:00')
  // console.log('---started---', started)
  // if (!started) {
  //   console.log('活动还没有开始')
  //   setTimeout(() => {
  //     uni.redirectTo({
  //       url: '/campaign/pages/2025OreoSnacksXEggyParty/status?status=0'
  //     })
  //   }, 200)
  //   return
  // }
  const ended = new Date() > new Date('2026/03/31 23:59:59')
  if (ended) {
    // 活动已结束
    setTimeout(() => {
      uni.redirectTo({
        url: '/campaign/pages/2025OreoSnacksXEggyParty/status?status=1'
      })
    }, 200)
  }

  await getApp().getUserInfo()

  const currentPage = getCurrentPages().at(-1)
  if (currentPage.route !== 'campaign/pages/2025OreoSnacksXEggyParty/index') return
  // 是否登录注册
  if (!getApp().globalData.user.phone) {
    if (state.qrcodeUrl) state.needRetry = true
    uni.navigateTo({ url: "/pages/vip/register?tag=scanCode" });
    return;
  }
  setTimeout(() => {
    if (state.qrcodeUrl) handleUrlCodeSubmit(state.qrcodeUrl)
  }, 100)
})

const uploadStayTimeEvent = (evt) => {
  console.log('---------stayTimeEvt', evt)
  if (!enterTime) return
  // 用户退出时间
  outTime = new Date();
  //停留时间(毫秒)
  stayTime = (outTime?.getTime() - enterTime?.getTime()) / 1000;
  console.log('----------stayTime', stayTime)
  emdlz('track','event','oreo_stay_playful_landing_page_2025','view','landing_page', stayTime);
  // emdlz('track','event','Oreo_eggy_landing_page','view','eggy_landing_page', stayTime);
}

onUnload(() => uploadStayTimeEvent('onBeforeMount'))
onHide(() => uploadStayTimeEvent('hide'))

// onShareAppMessage(() => ShareConfig())
onPullDownRefresh(() => {
  console.log("refresh");
});

onBeforeUnmount(() => {
  if (animationInterval) {
    clearInterval(animationInterval)
  }
})

const goBack = () => {
  // emdlz('track','event','landingpage','click','go_buy', '');
  // emdlz('track','event','Oreo_eggy_landing_page','click','go_purchase','');
  // linkTo('/pages/home/home')
  emdlz('track','event','oreo_stay_playful_landing_page_2025','click','back_home','');
  setTimeout(() => {
    uni.switchTab({ url: "/pages/home/home" })
  }, 300)
}

const linkTo = url => uni.navigateTo({ url })

</script>

<style lang="less" scoped>
@import "@/static/css/theme.less";

image {
  display: block;
}

.main-content {
  width: 750rpx;
  height: 100vh;
  // height: 1613rpx;
  min-height: 1330rpx;
  // background-size: 100% 100%;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: 0 -160rpx;
  box-sizing: border-box;
  position: relative;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
}
.center{
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}
.child_img{
  width: 100%;
}
.outer-box{
  width: 750rpx;
  height: 1130rpx;
  // background-color: red;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  // top: 310rpx;
}
.slogan{
  width: 564rpx;
  height: 264rpx;
  // top: 320rpx;
}
.tt-ani{
  width: 750rpx;
  height: 454rpx;
  position: relative;
  // top: 600rpx;
}
.tt-video{
  width: 750rpx;
  height: 478rpx;
  // top: 662rpx;
  video{
    object-fit: cover;
    background: transparent;
    height: 100%;
  }
  .cover-line{
    width: 2rpx;
    height: 100%;
    background-color: #1e5bc2;
    position: absolute;
    top: 0;
    z-index: 9999;
  }
  .cover-line-right{
    right: 0 !important;
  }
}
.bottom-box{
  margin-top: -40rpx;
}
.tt{
  width: 750rpx;
  height: 165rpx;
  // top: 1062rpx;
}
.btn-box{
  margin-top: -15rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
  .btn-item{
    width: 325rpx;
  }
  .btn-go{
    margin-top: 36rpx;
  }
}
</style>
